<!--  -->
<template>
  <div class="row" >
      <div  v-for="(item1,index1) in rowData" :key="index1" >
           <div v-for="(item,index) in item1.data" :key="index" class="seat"
            :style="{ width: boxWH + 'px', height: boxWH + 'px', top:topM(item.rowNo),left:leftM(item.columnNo) }"
            :class="item.status==0?'noSeat':''"
            @click="seatM(item)"
        >
            <input type="checkbox"  name="checkbox" class="checkbox" v-model="item.checkbox" v-if="item.status!=0"  :disabled="!item.checkbox && selectedList.length === 4">
        </div>
      </div>

  </div>
</template>

<script>
export default {
  name: 'row',
  props: {
    rowData: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 第几行
    rowNum: {
      type: Number,
      default: 0
    },
    // 座位宽高
    boxWH: {
      type: Number,
      default: 0
    },
    // 座位间距
    boxSpacing: {
      type: Number,
      default: 0
    }

  },
  data () {
    return {
      styleObject: {
        width: '',
        height: '',
        right: '',
        top: ''
      },
      // 选中的座位
      selectedList: []
    }
  },

  components: {},

  computed: {},

  mounted () {
    this.styleObject.width = this.styleObject.height = this.boxWH
  },

  methods: {
    // 计算to值
    topM (rowNo) {
      const no = rowNo - 1
      return (no * this.boxSpacing + no * this.boxWH) + 'px'
    },
    // 计算left值
    leftM (columnNo) {
      const no = columnNo - 1
      return (no * this.boxSpacing + no * this.boxWH) + 'px'
    },
    seatM (item) {
      const bol = this.selectedList.findIndex(obj => obj.seatNo === item.seatNo)
      if (bol >= 0) {
        this.selectedList.splice(bol, 1)
      } else {
        if (this.selectedList.length === 4) {
          console.log('最多选择4个座位')
          return
        }
        this.selectedList.push(item)
      }
      this.$emit('result', this.selectedList)
    }
  }
}

</script>
<style lang='scss' scoped>
.row{
    position: relative;
    width: 100%;
}
.seat{
    position: absolute;
    border-radius: 30%;
    background: #fff;
}
.noSeat{
    background: #A0EEE1;
}

// :before
// {
// content:"台词：-";
// background-color:yellow;
// color:red;
// font-weight:bold;
// }
.checkbox{
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0.5;
}
</style>
